<template>
  <div class="w-50 mx-auto">
    <div class="row mb-4 border-bottom pb-4 align-items-center" v-if="column">
      <div class="col-3 text-center">
        <img
          :src="column.avatar && column.avatar.fitUrl"
          :alt="column.title"
          class="rounded-circle border w-100"
        />
      </div>
      <div class="col-9">
        <h4>{{ column.title }}</h4>
        <p class="text-muted">
          {{ column.description }}
        </p>
      </div>
    </div>
    <posts-list :list="postsList"></posts-list>
    <button
      v-if="!isLastPage"
      class="btn btn-outline-primary mt-2 mb-5 mx-auto d-block w-25"
      @click.prevent="loadMoreData"
    >
      加载更多
    </button>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, computed, onMounted } from 'vue'
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
import { resetImagesStyle } from '@/utils'
import { IStore, IColumnProp, TPostsList, IImageProp } from '@/types/index'
import PostsList from '@/components/PostsList.vue'
import useLoadMore from '@/hooks/useLoadMore'
export default defineComponent({
  name: 'Colunm',
  components: { PostsList },
  setup() {
    const route = useRoute()
    const store = useStore<IStore>()
    const currentId = route.params.id
    const column = computed(() => {
      const currentColumn: IColumnProp = store.getters.getColumnById(currentId)
      if (currentColumn) {
        currentColumn.avatar = resetImagesStyle(currentColumn.avatar, 100, 100)
      }

      return currentColumn
    })
    const postsList = computed(() => {
      const currentPostsList: TPostsList =
        store.getters.getPostsListByCId(currentId)
      return currentPostsList.map((item) => {
        if (item.image) {
          item.image = item.image as IImageProp
          item.image = resetImagesStyle(item.image, 200, 110, ['m_fill'])
        }

        return item
      })
    })
    const state = reactive({
      pageSize: 3,
      currentPage: 1
    })
    const { loadMoreData, isLastPage } = useLoadMore('getPostsList', state, {
      columnId: currentId
    })
    onMounted(() => {
      store.dispatch('getColumn', currentId)
      loadMoreData()
    })
    return { column, postsList, isLastPage, loadMoreData }
  }
})
</script>
